<template>
  <div style="padding: 10px 0px; background-color: white">
    <van-form @submit="submitForm" readonly>
      <searchable-picker
        v-model="form.taskType"
        :columns="dict.type.task_type"
        valueKey="value"
        labelKey="label"
        label="工单类型"
        placeholder="点击工单类型"
        :rules="[{ required: true, message: '请选择工单类型' }]"
        readonly
      />
      <searchable-picker
        v-model="form.customerId"
        :columns="customerList"
        valueKey="customerId"
        labelKey="customerName"
        label="客户名称"
        placeholder="点击选择客户名称"
        :rules="[{ required: true, message: '请选择客户名称' }]"
        readonly
      />
      <searchable-picker
        v-model="form.orderId"
        :columns="orderListAll"
        valueKey="orderId"
        labelKey="orderName"
        label="商机名称"
        placeholder="点击选择商机名称"
        :rules="[{ required: true, message: '请选择商机名称' }]"
        readonly
      />
      <van-field
        readonly
        clickable
        name="area"
        :value="form.region"
        label="地区选择"
        placeholder="点击选择省市区"
        :rules="[{ required: true, message: '请选择地区' }]"
      />

      <van-field
        v-model="form.startTime"
        label="开始日期"
        placeholder="请选择开始日期"
        :rules="[{ required: true, message: '开始日期不能为空' }]"
      />
      <van-field
        v-model="form.endTime"
        label="结束日期"
        placeholder="请选择结束日期"
        :rules="[{ required: true, message: '结束日期不能为空' }]"
      />

      <searchable-picker
        v-model="form.taskLevel"
        :columns="dict.type.task_level"
        valueKey="value"
        labelKey="label"
        label="紧急程度"
        placeholder="点击紧急程度"
        :rules="[{ required: true, message: '请选择紧急程度' }]"
        readonly
      />
      <searchable-picker
        v-model="form.taskMode"
        :columns="dict.type.task_mode"
        valueKey="value"
        labelKey="label"
        label="实施类型"
        placeholder="点击实施类型"
        :rules="[{ required: true, message: '请选择实施类型' }]"
        readonly
      />
      <searchable-picker
        v-model="form.userId"
        :columns="userList"
        valueKey="userId"
        labelKey="userName"
        label="负责人"
        placeholder="点击负责人"
        :rules="[{ required: true, message: '请选择负责人' }]"
        readonly
      />
      <van-field
        v-model="form.receivablePayable"
        type="number"
        label="应收金额"
        placeholder="请输入应收金额"
      />
      <van-field
        v-model="form.receivablePaid"
        type="number"
        label="已收金额"
        placeholder="请输入已收金额"
      />
      <van-field
        v-model="form.taskPrice"
        rows="3"
        autosize
        label="实施价格"
        type="textarea"
        placeholder="请输实施价格"
      />
      <van-field
        style="margin-bottom: 50px"
        v-model="form.remark"
        rows="3"
        autosize
        label="工作日志"
        type="textarea"
        placeholder="请输入工作日志"
        :rules="[{ required: true, message: '请输入工作日志' }]"
      />
      <van-field
        style="margin-bottom: 50px"
        v-model="form.illustrate"
        rows="3"
        autosize
        label="工单说明"
        type="textarea"
        placeholder="请输入工单说明"
      />
      <div class="mobile-footer">
        <van-button
          type="info"
          native-type="submit"
          style="width: 90%; border-radius: 10px"
          >办理</van-button
        >
      </div>
    </van-form>
     <auditComponent ref="auditComponent" @handle="handleBtn"></auditComponent>
  </div>
</template>
  
<script>
import { getTask, audit } from "@/api/crm/task";
import { getCityTreeAllByParentId } from "@/api/system/city";
import { getCrmOrderAllNoPage } from "@/api/crm/order";
import { getCrmCustomerAllNoPage } from "@/api/crm/customer";
import { getUserListByStatus } from "@/api/system/user";
import auditComponent from "../components/auditComponent.vue";
export default {
  name: "Taskove",
  dicts: ["task_type", "task_level", "task_mode", "task_status"],
  components: { auditComponent },
  data() {
    return {
      cityTree: [],
      orderList: [],
      orderListAll: [],
      userList: [],
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      // 指定跳转节点
      nodeCode: "",
      customerList: [],
      orderList: [],
      value: "",
      taskId: ""
    };
  },
  created() {
    this.value = this.$route.query.value;
    this.taskId = this.$route.query.taskId;
    this.getCrmOrderAllNoPage();
    this.getCityTree();
    this.getCrmCustomerAllNoPage();
    this.getUserListByStatus();
    this.getTask();
  },
  methods: {
    async getCityTree() {
      await getCityTreeAllByParentId(1).then((response) => {
        this.cityTree = response.data;
        this.cityTree = this.moveJiangxiToFirst(this.cityTree)
      });
    },
    async getCrmOrderAllNoPage() {
      await getCrmOrderAllNoPage({}).then((res) => {
        this.orderListAll = res.data;
      });
    },
    async getCrmCustomerAllNoPage() {
      await getCrmCustomerAllNoPage({}).then((res) => {
        this.customerList = res.data;
      });
    },
    async getUserListByStatus() {
      await getUserListByStatus({ status: "0" }).then((res) => {
        this.userList = res.data;
      });
    },
    async getTask() {
      await getTask(this.value).then((response) => {
        if (!response.data) {
          this.$modal.alertWarning("代办任务不存在");
        }
        console.log(response.data);
        this.form = response.data;
        this.form.region = this.form.region
          ? this.form.region.split(",")
          : null;
        this.title = this.form.createBy + " 工单审批";
        this.open = true;
      });
    },
    submitForm(){
      this.$refs.auditComponent.open();
    },
    /** 审核通过按钮 */
    handleBtn(obj) {
        this.form.region = null
        this.form.taskId = this.taskId;
        this.form.message = obj.message
        this.form.signature = obj.signature
        this.form.skipType = obj.skipType
        audit(this.form).then((response) => {
          this.$toast.success("办理成功");
          this.$router.replace("/flow/todo")
        }); 
    },
  },
};
</script>
  
  <style scoped>
.submitButton {
  width: 95%;
  height: 50px;
  position: fixed;
  top: 90%;
  left: 10px;
}
</style>